var wx1 = document.querySelector(".wx1");
var wx2 = document.querySelector(".wx2");
var wx3 = document.querySelector(".wx3");
var wx4 = document.querySelector(".wx4");
var wx5 = document.querySelector(".wx5");
var wx6 = document.querySelector(".wx6");
var wx1ttt = document.querySelector(".wx1-ttt");
var btn2 = document.querySelector(".btn2");
var btn3 = document.querySelector(".btn3");
var wx1goddess = document.querySelector(".wx1-goddess");
var wx4countdown = document.querySelector(".wx4-countdown");
var wx4countdown2 = document.querySelector(".wx4-countdown2");
var wx1sz = document.querySelector(".wx1-sz");
var wjzcount1 = 0;
var wjzcount2 = -2;
var wx4fs = document.querySelector(".wx4-fs");
var wx4alert = document.querySelector(".wx4-alert");
var wx4alert2 = document.querySelector(".wx4-alert2");
var wx4alertdefeat = document.querySelector(".wx4-alert-defeat");
var wx4alertagain = document.querySelector(".wx4-alert-zlyc");
var wx4alertzeby = document.querySelector(".wx4-alert-zeby");
var wx6dzj1 = document.querySelector(".wx6-dzj1");
var wx6dzj2 = document.querySelector(".wx6-dzj2");
var wx6dzj3 = document.querySelector(".wx6-dzj3");
var btn5 = document.querySelector(".btn5");
var wx5goddess = document.querySelector(".wx5-goddess");




var hyinyue = document.getElementsByClassName("hyinyue")[0];
var hyy = document.getElementsByClassName("hyy")[0];
var hx3dhdj = document.getElementsByClassName("hx3-dh-dj")[0];
hyinyue.onclick = function (){
	if(hyinyue.style.animationPlayState == "paused"){
		hyinyue.style.animationPlayState = "running";
		hyy.play()
	}else{
		hyinyue.style.animationPlayState = "paused";
		
		hyy.pause()
	}
}






var wx4alertfanhui = document.querySelector(".wx4-alert-fanhui");
var wer1 = setInterval(function(){
	wjzcount1++
	wx1ttt.style.width = wjzcount1 + "%"
	wx1sz.innerText = "loading..." + wjzcount1 + "%"
	if(wjzcount1 == 100){
		clearInterval(wer1)
		wfy(wx1,wx2)
	}
},48)
var fscount = 0;
var wer2 = setInterval(function(){
	wjzcount2++
	wx1goddess.style.left = wjzcount2 + "%"
	if(wjzcount2 == 94){
		clearInterval(wer2)
		wfy(wx1,wx2)
		
	}
},50)
btn2.onclick  = function(){
	wfy(wx2,wx3)
}
var wcountdown = 30;
btn3.onclick  = function(){
	wfy(wx3,wx4)
	var wer4 = setInterval(function(){
		wcountdown--
		wx4countdown.innerText = wcountdown + "s"
		if(wcountdown == 0){
			fscount = 0
			wx4fs.innerText = fscount 
			clearInterval(wer4)
			wx4alert.style.display = "block"
		}
	},1000)
}

wx4alertagain.onclick = function(){
	wx4alert.style.display = "none"
	wcountdown = 30
	wx4fs.innerText = 0
	fscount = 0
	if(wx4countdown.innerText == "0s"){
		wcountdown = 30
		wer4 = setInterval(function(){
		wcountdown--
		wx4countdown.innerText = wcountdown + "s"
		if(wcountdown == 0){
			fscount = 0
			wx4fs.innerText = fscount 
			clearInterval(wer4)
			wx4alert.style.display = "block"
		}
	},1000)
	}
}
var wx4dui = document.querySelectorAll(".wx4-dui");
var wx4cuo = document.querySelectorAll(".wx4-cuo");
		var fscount = 0;
		var wx4rabbit = document.querySelectorAll(".wx4-rabbit");
		var wx4frog = document.querySelectorAll(".wx4-frog");
		var a = [0,0,0,1];
		var wer = setInterval(function(){
			var wcount = Math.floor(Math.random()*9)
			var qingwa = Math.floor(Math.random()*a.length)
			
			if (wx4rabbit[wcount].value === 0) { // 由于你点击的时候给兔子添加了 value = 0 所以在这里拦截到的兔子都是被点击过的兔子 不再重复添加动画
				return
			}
			if(wx4rabbit[wcount].style.animation != "" || wx4frog[wcount].style.animation != ""){
				return
			}
			if(qingwa == 3){
				wx4frog[wcount].style.animation = "qw 1.9s linear alternate backwards"
				setTimeout(function(){
					wx4frog[wcount].style.animation = ""
				},1880)
			}else{
				wx4rabbit[wcount].style.animation = "rabbit 1.9s linear alternate backwards"
				setTimeout(function(){
					wx4rabbit[wcount].style.animation = ""
				},1880)
			}
			
			
			
		},500)
for(var i = 0; i < wx4rabbit.length; i++){
	wx4rabbit[i].onclick = function(){
		if(this == wx4rabbit[0]){
			wx4dui[0].style.display = "block"
			var wx4duileft = parseInt(wx4dui[0].offsetLeft);
			var wx4duitop = parseInt(wx4dui[0].offsetTop);
			wx4dui[0].style.transition = "all 2s linear"
			wx4dui[0].style.left = wx4duileft + 400 + "px"
			wx4dui[0].style.top = wx4duileft - 300 + "px"
			setTimeout(function(){
				wx4dui[0].style.display = "none"
				wx4dui[0].style.left = wx4duileft + "px"
				wx4dui[0].style.top = wx4duitop + "px"
			},2000)
		}
		if(this == wx4rabbit[1]){
			wx4dui[1].style.display = "block"
			var wx4duileft = parseInt(wx4dui[1].offsetLeft);
			var wx4duitop = parseInt(wx4dui[1].offsetTop);
			wx4dui[1].style.transition = "all 2s linear"
			wx4dui[1].style.left = wx4duileft + 400 + "px"
			wx4dui[1].style.top = wx4duileft - 300 + "px"
			setTimeout(function(){
				wx4dui[1].style.display = "none"
				wx4dui[1].style.left = wx4duileft + "px"
				wx4dui[1].style.top = wx4duitop + "px"
			},2000)
		}
		if(this == wx4rabbit[2]){
			wx4dui[2].style.display = "block"
			var wx4duileft = parseInt(wx4dui[2].offsetLeft);
			var wx4duitop = parseInt(wx4dui[2].offsetTop);
			wx4dui[2].style.transition = "all 2s linear"
			wx4dui[2].style.left = wx4duileft + 400 + "px"
			wx4dui[2].style.top = wx4duileft - 300 + "px"
			setTimeout(function(){
				wx4dui[2].style.display = "none"
				wx4dui[2].style.left = wx4duileft + "px"
				wx4dui[2].style.top = wx4duitop + "px"
			},2000)
		}
		if(this == wx4rabbit[3]){
			wx4dui[3].style.display = "block"
			var wx4duileft = parseInt(wx4dui[3].offsetLeft);
			var wx4duitop = parseInt(wx4dui[3].offsetTop);
			wx4dui[3].style.transition = "all 2s linear"
			wx4dui[3].style.left = wx4duileft + 400 + "px"
			wx4dui[3].style.top = wx4duileft - 300 + "px"
			setTimeout(function(){
				wx4dui[3].style.display = "none"
				wx4dui[3].style.left = wx4duileft + "px"
				wx4dui[3].style.top = wx4duitop + "px"
			},2000)
		}
		if(this == wx4rabbit[4]){
			wx4dui[4].style.display = "block"
			var wx4duileft = parseInt(wx4dui[4].offsetLeft);
			var wx4duitop = parseInt(wx4dui[4].offsetTop);
			wx4dui[4].style.transition = "all 2s linear"
			wx4dui[4].style.left = wx4duileft + 400 + "px"
			wx4dui[4].style.top = wx4duileft - 300 + "px"
			setTimeout(function(){
				wx4dui[4].style.display = "none"
				wx4dui[4].style.left = wx4duileft + "px"
				wx4dui[4].style.top = wx4duitop + "px"
			},2000)
		}
		if(this == wx4rabbit[5]){
			wx4dui[5].style.display = "block"
			var wx4duileft = parseInt(wx4dui[5].offsetLeft);
			var wx4duitop = parseInt(wx4dui[5].offsetTop);
			wx4dui[5].style.transition = "all 2s linear"
			wx4dui[5].style.left = wx4duileft + 400 + "px"
			wx4dui[5].style.top = wx4duileft - 300 + "px"
			setTimeout(function(){
				wx4dui[5].style.display = "none"
				wx4dui[5].style.left = wx4duileft + "px"
				wx4dui[5].style.top = wx4duitop + "px"
			},2000)
		}
		if(this == wx4rabbit[6]){
			wx4dui[6].style.display = "block"
			var wx4duileft = parseInt(wx4dui[6].offsetLeft);
			var wx4duitop = parseInt(wx4dui[6].offsetTop);
			wx4dui[6].style.transition = "all 2s linear"
			wx4dui[6].style.left = wx4duileft + 400 + "px"
			wx4dui[6].style.top = wx4duileft - 300 + "px"
			setTimeout(function(){
				wx4dui[6].style.display = "none"
				wx4dui[6].style.left = wx4duileft + "px"
				wx4dui[6].style.top = wx4duitop + "px"
			},2000)
		}
		if(this == wx4rabbit[7]){
			wx4dui[7].style.display = "block"
			var wx4duileft = parseInt(wx4dui[7].offsetLeft);
			var wx4duitop = parseInt(wx4dui[7].offsetTop);
			wx4dui[7].style.transition = "all 2s linear"
			wx4dui[7].style.left = wx4duileft + 400 + "px"
			wx4dui[7].style.top = wx4duileft - 300 + "px"
			setTimeout(function(){
				wx4dui[7].style.display = "none"
				wx4dui[7].style.left = wx4duileft + "px"
				wx4dui[7].style.top = wx4duitop + "px"
			},2000)
		}
		if(this == wx4rabbit[8]){
			wx4dui[8].style.display = "block"
			var wx4duileft = parseInt(wx4dui[8].offsetLeft);
			var wx4duitop = parseInt(wx4dui[8].offsetTop);
			wx4dui[8].style.transition = "all 2s linear"
			wx4dui[8].style.left = wx4duileft + 400 + "px"
			wx4dui[8].style.top = wx4duileft - 300 + "px"
			setTimeout(function(){
				wx4dui[8].style.display = "none"
				wx4dui[8].style.left = wx4duileft + "px"
				wx4dui[8].style.top = wx4duitop + "px"
			},2000)
		}
		
		this.value = 0 // 点击的时候随便给它一个值，使得 ↑ 上面循环添加动画时候能拦截到这个 value 为 1 的兔子
		var wx4rabbitleft = parseInt(this.offsetLeft);
		var wx4rabbittop = parseInt(this.offsetTop);
		this.style.top = wx4rabbittop + 'px'
		this.style.animation = null
		this.style.opacity = 1
// //		this.style.animation = "fei 3s linear infinite"
		this.style.transition = "all 2s linear"
		this.style.left = wx4rabbitleft + 400 + "px"
		setTimeout( () => {
			this.style.top = wx4rabbittop - 300 + "px"
		},1)
		setTimeout( () => {
			this.style.opacity = 0
			this.style.transition = null
			this.style.left = wx4rabbitleft + "px"
			this.style.top = wx4rabbittop + "px"
			this.value = 1
		},2000)
				
		fscount++
		wx4fs.innerText = fscount 
		this.style.animation = ""
		if(fscount == 12){
		wx4alert2.style.display = "block"
		}
		}
	wx4alertzeby.onclick = function(){
		wfy(wx4,wx5)
	}
}
		for(var j = 0; j < wx4rabbit.length; j++){
			wx4frog[j].onclick = function(){
				wx4alert.style.display = "block"
//				fscount = 0
//				wx4fs.innerText = fscount 
				this.style.animation = "";
		if(this == wx4frog[0]){
			wx4cuo[0].style.display = "block"
			setTimeout(function(){
				wx4cuo[0].style.display = "none"
			},100)
		}
		if(this == wx4frog[1]){
			wx4cuo[1].style.display = "block"
			setTimeout(function(){
				wx4cuo[1].style.display = "none"
			},100)
		}
		if(this == wx4frog[2]){
			wx4cuo[2].style.display = "block"
			setTimeout(function(){
				wx4cuo[2].style.display = "none"
			},100)
		}
		if(this == wx4frog[3]){
			wx4cuo[3].style.display = "block"
			setTimeout(function(){
				wx4cuo[3].style.display = "none"
			},100)
		}
		if(this == wx4frog[4]){
			wx4cuo[4].style.display = "block"
			setTimeout(function(){
				wx4cuo[4].style.display = "none"
			},100)
		}
		
		if(this == wx4frog[5]){
			wx4cuo[5].style.display = "block"
			setTimeout(function(){
				wx4cuo[5].style.display = "none"
			},100)
		}
		if(this == wx4frog[6]){
			wx4cuo[6].style.display = "block"
			setTimeout(function(){
				wx4cuo[6].style.display = "none"
			},100)
		}
		if(this == wx4frog[7]){
			wx4cuo[7].style.display = "block"
			setTimeout(function(){
				wx4cuo[7].style.display = "none"
			},100)
		}
		if(this == wx4frog[8]){
			wx4cuo[8].style.display = "block"
			setTimeout(function(){
				wx4cuo[8].style.display = "none"
			},100)
		}
			
		}
 		
	}
		
		
		



		wx4alertfanhui.onclick = function(){
			wfy(wx4,wx2)
		}









btn5.onclick = function(){
	wx5goddess.style.animation = "dou 5s linear forwards"
	setTimeout(function(){
		wfy(wx5,wx6)
		abc()
	},6000)


}


var wz1 = "亲爱的你"
var wz2 = "又是一年中秋佳节，在此我们祝愿您，中秋\n\n\n快乐，阖家团圆。"
var wz3 = "END"
var dzjcount1 = 0;
function abc(){
	var wer5 = setInterval(function(){
		dzjcount1++
		var cd = wz1.substring(0,dzjcount1);
		wx6dzj1.innerText = cd
	},100)
	if(dzjcount1 > wz1.length){
		clearInterval(wer5)
	}
	setTimeout(function(){
		var dzjcount2 = 0;
		var wer6 = setInterval(function(){
			dzjcount2++
			var cd2 = wz2.substring(0,dzjcount2);
			wx6dzj2.innerText = cd2
		},100)
		if(dzjcount2 > wz2.length){
			clearInterval(wer6)
		}
	},500)
	setTimeout(function(){
		var dzjcount3 = 0;
		var wer7 = setInterval(function(){
			dzjcount3++
			var cd3 = wz3.substring(0,dzjcount3);
			wx6dzj3.innerText = cd3
		},100)
		if(dzjcount3 > wz3.length){
			clearInterval(wer7)
		}
	},4000)
	
}
var btn6 = document.querySelector(".btn6");
btn6.onclick = function(){
	wfy(wx6,wx2)
}





function wfy(a,b){

	a.style.animation = "wfy1 1s linear"
	b.style.display = "block"
	b.style.animation = "wfy2 1s linear"
	setTimeout(function(){
	a.style.display = "none"
		
	},1000)
}
